<template>
  <header class="header">
    <div class="logo">
      <a href="http://localhost:8080/"><img src="@/assets/logo.png" alt="Logo" class="logo-img" /></a>
    </div>
    <div class="search-box">
      <div class="search-actions">
        <router-link to="/article_release">
          <button class="search-btn">文章发布</button>
        </router-link>
        <div v-if="showAdminButtons">
          <router-link to="/article_management">
            <button class="search-btn">文章管理</button>
          </router-link>
          <router-link to="/user_management">
            <button class="search-btn">用户管理</button>
          </router-link>
          <router-link to="/favorite_management">
            <button class="search-btn">文章收藏管理</button>
          </router-link>
        </div>
      </div>
      <el-input v-model="searchQuery" placeholder="请输入搜索内容" class="search-input" />
      <button class="search-btn" @click="handleSearch">搜索</button>
    </div>
    <div class="auth-links">
      <template v-if="!isLoggedIn">
        <router-link to="/login">登录</router-link>
        <router-link to="/register">注册</router-link>
      </template>
      <template v-else>
        <img src="@/assets/avatar.jpg" alt="Logo" class="logo-img" />
        <button @click="logout">退出</button>
      </template>
    </div>
  </header>
</template>

<script>
import { ref, onMounted ,computed} from 'vue';
import { useRouter } from 'vue-router';
import { getToken,  removeToken, getRole } from '@/utils/auth';


export default {
  name: 'qimo_Header',
  setup() {
    const searchQuery = ref('');
    const router = useRouter();
    const isLoggedIn = ref(false); // 初始为未登录
    const userRole = ref('');

    const logout = () => {
      removeToken();
      isLoggedIn.value = false;
      userRole.value = '';
      router.push('/login');
    };

    const fetchUserInfo = async () => {
  try {
    const token = getToken();
    if (token) {
      const { role } = getRole(); // 获取 role
      if (role) {
        console.log('Fetched role:', role); // 调试输出
        userRole.value = role; // 设置 role
        isLoggedIn.value = true;
      } else {
        throw new Error('Role is undefined');
      }
    }
  } catch (error) {
    console.error('Failed to fetch user info:', error);
  }
};

onMounted(() => {
  fetchUserInfo();
});


    return {
      searchQuery,
      isLoggedIn,
      userRole,
      logout,
      showAdminButtons: computed(() => userRole.value === 'admin'),
    };
  },
};
</script>

  
  <style scoped>
  /* Header样式 */
  .header {
    display: flex;
    justify-content: space-between;
    padding: 20px;
    background-color: #f8f8f8;
  }
  
  .logo {
    flex: 1;
  }
  
  .logo-img {
    height: 50px;
  }
  
  .search-box {
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
  
  .search-actions {
    display: flex;
    margin-right: 10px;
  }
  
  .search-btn {
    padding: 5px 10px;
    font-size: 14px;
    background-color: #42b983;
    color: white;
    border: none;
    cursor: pointer;
    margin-right: 10px;
  }
  
  .search-btn:hover {
    background-color: #34a77b;
  }
  
  .search-input {
    width: 300px;
    margin-right: 10px;
  }
  
  .auth-links {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
  
  .auth-links a,
  .auth-links button {
    margin-left: 15px;
    font-size: 16px;
    color: #42b983;
    cursor: pointer;
  }
  
  .auth-links button {
    border: 1px solid #42b983;
    background-color: white;
    padding: 5px 10px;
    cursor: pointer;
  }
  
  .auth-links button:hover {
    background-color: #42b983;
    color: white;
  }
  </style>
  